<template>
    <div id="login">
        <form novalidate class="md-layout" @submit.prevent="validateUser">
            <md-avatar class="md-large">
                <img src="../assets/img/login_avatar.jpg" />
            </md-avatar>
            <md-card-content>
                <md-field :class="getValidationClass('username')">
                    <i class="iconfont icon-user"></i>
                    <md-input class="md-input" value="test" v-model="form.username" />
                    <span class="md-error" v-if="!$v.form.username.required">用户名必填</span>
                    <span class="md-error" v-else-if="!$v.form.username.minlength">非有效用户名</span>
                </md-field>
                <md-field :class="getValidationClass('password')">
                    <i class="iconfont icon-password"></i>
                    <md-input v-model="form.password" value="test" />
                    <span class="md-error" v-if="!$v.form.password.required">密码必填</span>
                    <span class="md-error" v-else-if="!$v.form.password.minlength">非有效密码</span>
                </md-field>
                <md-button type="submit" class="md-raised md-accent md-btnL">登录</md-button>
                <md-button type="button" class="md-raised md-accent md-btnR">注册</md-button>
            </md-card-content>
        </form>
         <div class="overlay" v-if="isLogin">
            <md-progress-spinner class="md-accent" :md-diameter="150" :md-stroke="10" md-mode="indeterminate" ></md-progress-spinner>
        </div>
    </div>
</template>
<script>
import { validationMixin } from "vuelidate";
import {
  required,
  email,
  minLength,
  maxLength
} from "vuelidate/lib/validators";
export default {
  name: "login",
  mixins: [validationMixin],
  data: () => ({
    form: {
      username: 'test',
      password: 'test'
    },
    isLogin: false,
    amount: 100
  }),
  validations: {
    form: {
      username: {
        required,
        minLength: minLength(3)
      },
      password: {
        required,
        minLength: minLength(3)
      }
    }
  },
  methods: {
    getValidationClass(fieldName) {
      const field = this.$v.form[fieldName];
      if (field) {
        return {
          "md-invalid": field.$invalid && field.$dirty
        };
      }
    },
    validateUser() {
      this.$v.$touch();
      if (!this.$v.$invalid) {
        if (this.form.username === "test" && this.form.password === "test") {
          this.isLogin = true;
          setTimeout(() => {
            this.isLogin = false;
            let token="a14afef0f66fcffce3e0fcd2e34f6ff4";
            localStorage.setItem("token",token);
            // 提交到mutations
            this.$store.commit('LOGINSTATUS',{token:token});
            this.$router.replace("/movies");
          }, 1000);
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../styles/var";
#login {
  width: 100%;
  height: 100%;
  overflow: scroll;
  background: url("../assets/img/login_bg.jpg") no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-content: center;
  .md-large {
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
  form {
    width: 80%;
    margin-top: 30%;
    display: block;
    text-align: center;
    .iconfont {
      color: @lightWhite;
      font-size: @largerSize;
    }
    .md-field.md-theme-default{
      border-bottom: 1px solid @lightWhite;
    }
    .md-field.md-theme-default:before{
        background-color: @bodyColor;
    }
    .md-input {
      padding-left: 10px;
      -webkit-text-fill-color: @lightWhite;
      color:@lightWhite;
    }
    .md-error {
      color: @redColor;
    }
    .md-btnL {
      background-color: @orangeColor;
      color: @lighterWhite;
    }
    .md-btnR {
      background-color: @orange;
      color: @lighterWhite;
    }
  }
  .overlay {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 78%, 0.6);
    z-index: 999;
    .md-progress-spinner {
      z-index: 999999;
    }
  }
}
</style>

